import React, { Component } from 'react';

// 导入封装的方法（一级分类接口，二三级分类接口）
import { get_list,get_subcate } from '../../api/index'
// 导入高阶组件
import { withRouter } from 'react-router-dom'

import '../../styles/Classify/NavBar.css'

class NavBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navList: [],
            matterList: [],
            subNavs: [],
            navIndex: 0,
            navIndex2: 0,
        }
    }

    componentDidMount() {
        // 渲染一级分类
        get_list().then((res)=>{
            // console.log(res.data.list);
            this.setState({
                navList : res.data.list
            })
        })
    }
    // 点击一级分类
    handerClick1(index,e) {
        this.setState({
            navIndex: index
        })
        get_subcate({'id':this.state.navList[index].id}).then((res=>{
            // console.log(res);
            this.setState({
                matterList : res.data.subcate.subcategory
            })
        }))
    }
    // 点击二级分类
    handerClick2(index2,e) {
        this.setState({
            navIndex2: index2,
            subNavs : this.state.matterList[index2].subNavs
        })
        // console.log(this.state.matterList[index2].subNavs);
    }
    // 点击分类
    handerList(index3,e) {
        const shopId = this.state.subNavs[index3].id;
        this.props.history.push({pathname:'/index/allshop',state:{id:shopId}});
    }
    render() {
        return (
            <div className='navBox'>
                <div className='leftBox'>
                    {
                    this.state.navList.map((item,index)=>{
                        return (
                            <div className={`small-box ${this.state.navIndex === index?'highlight':''}`} onClick={(e)=>{
                                this.handerClick1(index,e)
                            }} key={index}>
                                {item.name}
                            </div>
                        )
                    })
                    }
                </div>
                <div className='rightBox'>
                    <div className='box1'>
                    {
                        this.state.matterList.map((item2,index2)=>{
                            return (
                                <div className={`box1-1 ${this.state.navIndex2 === index2?'highlight':''}`} key={item2.id} onClick={(e)=>{this.handerClick2(index2,e)}}> 
                                    {item2.name}
                                </div>
                            )
                        })
                    }
                    </div>
                    <div className='box2'>
                    {
                        this.state.subNavs.map((item3,index3)=>{
                            return (
                                <div className='box2-1' key={item3.id} onClick={(e)=>{this.handerList(index3,e)}}>
                                    <img src={item3.pic} alt="" />
                                    <span>{item3.name}</span>
                                </div>
                            )
                        })
                    }
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(NavBar);